<!--
  运营-招聘管理-职位【发布审核】
 -->
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="待审核" name="1">
        <!-- 搜索工作栏 -->
        <el-form
          ref="leftQueryForm"
          :model="leftQueryParams"
          size="small"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="职位名称" prop="jobName">
            <el-input
              v-model="leftQueryParams.jobName"
              placeholder="请输入职位名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="企业名称" prop="companyName">
            <el-input
              v-model="leftQueryParams.companyName"
              placeholder="请输入企业名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="创建人" prop="creator">
            <el-input
              v-model="leftQueryParams.creator"
              placeholder="请输入创建人姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="部门" prop="department">
            <el-input
              v-model="leftQueryParams.department"
              placeholder="请输入部门"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- <el-form-item label="手机号码" prop="phone">
            <el-input
              v-model="leftQueryParams.phone"
              placeholder="请输入手机号码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item> -->
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="leftQueryParams.email"
              placeholder="请输入邮箱"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-refresh"
              @click="resetQuery"
            >重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            >搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="leftList">
          <el-table-column label="序号" type="index" />
          <el-table-column label="职位姓名" align="center" prop="jobName" />
          <el-table-column label="招聘企业" align="center" prop="companyName" />
          <el-table-column label="创建人" align="center" prop="creator" />
          <el-table-column label="部门" align="center" prop="department" />
          <el-table-column label="联系方式" align="center" prop="phone">
            <template slot-scope="scope">
              <span>{{ scope.row.phone || '--' }}</span><br>
              <span>{{ scope.row.email || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="提交日期"
            align="center"
            prop="updateTime"
            width="180"
            sortable
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleCheck(scope.row, true)"
              >查看</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleAudit(scope.row, true)"
              >审核</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination
          v-show="leftTotal > 0"
          :total="leftTotal"
          :page.sync="leftQueryParams.pageNo"
          :limit.sync="leftQueryParams.pageSize"
          @pagination="leftGetList"
        />
      </el-tab-pane>
      <el-tab-pane label="已审核" name="2">
        <!-- 搜索工作栏 -->
        <el-form
          ref="rightQueryParams"
          :model="rightQueryParams"
          size="small"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="职位名称" prop="jobName">
            <el-input
              v-model="rightQueryParams.jobName"
              placeholder="请输入职位名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="企业名称" prop="companyName">
            <el-input
              v-model="rightQueryParams.companyName"
              placeholder="请输入企业名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="创建人" prop="creator">
            <el-input
              v-model="rightQueryParams.creator"
              placeholder="请输入创建人姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="审核人" prop="updater">
            <el-input
              v-model="rightQueryParams.updater"
              placeholder="请输入手机号码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="审核结果" prop="resultType">
            <el-select
              v-model="rightQueryParams.resultType"
              placeholder="请选择审核结果"
              size="small"
            >
              <!-- 职位状态(string)：0 未发布，1 待审核，2 发布中，3 暂停发布, 4 驳回 -->
              <!-- 审核结果，resultType(string)：0 全部['2', '3', '4']，1 通过 ['2', '3']，2 驳回 ['4'] -->
              <el-option label="全部" value="0" />
              <el-option label="通过" value="1" />
              <el-option label="驳回" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-refresh"
              @click="resetQuery"
            >重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            >搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="rightList">
          <el-table-column label="序号" type="index" />
          <el-table-column label="职位姓名" align="center" prop="jobName" />
          <el-table-column label="招聘企业" align="center" prop="companyName" />
          <el-table-column label="创建人" align="center" prop="creator" />
          <el-table-column label="部门" align="center" prop="department" />
          <el-table-column label="联系方式" align="center" prop="phone">
            <template slot-scope="scope">
              <span>{{ scope.row.phone || '--' }}</span><br>
              <span>{{ scope.row.email || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="提交日期"
            align="center"
            prop="updateTime"
            width="180"
            sortable
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime) }}</span>
            </template>
          </el-table-column>
          <!-- todo 审核人沒有 -->
          <el-table-column label="审核人" align="center" prop="updater" />
          <!-- todo 审核日期沒有 -->
          <el-table-column
            label="审核日期"
            align="center"
            prop="updateTime"
            width="180"
            sortable
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="职位状态" align="center" prop="status">
            <template slot-scope="scope">
              {{ jobStatus[scope.row.status] || "--" }}
            </template>
          </el-table-column>
          <el-table-column label="审核结果" align="center" prop="status">
            <template slot-scope="scope">
              <!-- 0 未发布，1 待审核，2 发布中，3 暂停发布, 4 驳回 -->
              {{ resultTypeStr[scope.row.status] || "--" }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleCheck(scope.row, true)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination
          v-show="rightTotal > 0"
          :total="rightTotal"
          :page.sync="rightQueryParams.pageNo"
          :limit.sync="rightQueryParams.pageSize"
          @pagination="rightGetList"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="查看职位" :visible.sync="checkDialog" width="80%">
      <el-descriptions
        v-if="currentRow !== null"
        :column="2"
        :colon="false"
        title="职位信息"
      >
        <el-descriptions-item label="职位信息：">{{
          currentRow.jobName
        }}</el-descriptions-item>
        <el-descriptions-item
          label="薪资范围："
        >{{ currentRow.highestSalary }}-{{
          currentRow.lowestSalary
        }}元/天</el-descriptions-item>
        <el-descriptions-item label="学历要求：">
          <div>
            <el-tag
              v-for="(item, ind) in currentRow.education"
              :key="ind"
              size="small"
              style="margin-right: 5px"
            >{{ getEducationName(item) }}</el-tag>
          </div>
        </el-descriptions-item>
        <el-descriptions-item
          label="工作周期："
        >{{ Number(currentRow.workPeriod) + 1 }}天/周</el-descriptions-item>
        <el-descriptions-item label="招聘对象：">{{
          Number(currentRow.identify) === 0 ? "在校" : "应届"
        }}</el-descriptions-item>
        <el-descriptions-item
          label="实习周期："
        >{{ currentRow.practicePeriod }}个月</el-descriptions-item>
        <el-descriptions-item label="招聘人数：">{{
          currentRow.recruitmentCount
        }}</el-descriptions-item>
        <el-descriptions-item label="" />
        <el-descriptions-item label="工作地址：">
          <div>{{ currentRow.city.join("") + currentRow.workAddress }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="" />
        <el-descriptions-item label="招聘企业：">{{
          currentRow.companyName
        }}</el-descriptions-item>
        <el-descriptions-item label="" />
        <el-descriptions-item label="福利标签：">
          <div>
            <el-tag
              v-for="(item, index) in currentRow.welfareTags"
              :key="index"
              size="small"
              style="margin-right: 5px"
            >{{ item }}</el-tag>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="" />
        <el-descriptions-item label="职位描述：">
          <el-input
            v-model="currentRow.jobDescription"
            type="textarea"
            disabled
            :autosize="{ minRows: 4, maxRows: 10 }"
          />
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        v-if="activeName === '2'"
        :column="1"
        :colon="false"
        title="审核内容"
      >
        <el-descriptions-item label="原因：" style="position: relative">
          <el-input
            v-model="remark"
            type="textarea"
            disabled
            :autosize="{ minRows: 4, maxRows: 10 }"
          />
          <div :class="['result-tips', checkResult ? 'greed-tip' : 'red-tip']">
            {{ checkResult ? "审核通过" : "审核驳回" }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item
          v-if="activeName === '2' && currentRow !== null"
          label="审核时间："
        >{{ parseTime(currentRow.updateTime) }}</el-descriptions-item>
        <el-descriptions-item
          v-if="activeName === '2' && currentRow !== null"
          label="审核人："
        >{{ currentRow.operation || '--' }}</el-descriptions-item>

      </el-descriptions>
      <span v-if="activeName === '1'" slot="footer" class="dialog-footer">
        <el-button
          @click="
            () => {
              auditDialog = false;
              checkDialog = false;
            }
          "
        >取 消</el-button>
        <el-button @click="handleAuditJob(false)">驳 回</el-button>
        <el-button
          type="primary"
          @click="handleAuditJob(true)"
        >通 过</el-button>
      </span>
    </el-dialog>
    <!-- 审核 -->
    <el-dialog
      :title="checkResult ? '审核通过' : '审核驳回'"
      :visible.sync="auditDialog"
      width="30%"
    >
      <el-radio v-model="checkResult" :label="true">通过</el-radio>
      <el-radio v-model="checkResult" :label="false">驳回</el-radio>
      <p>{{ checkResult ? "确定审核通过？" : "确定审核驳回？" }}</p>
      <el-input
        v-model="remark"
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 6 }"
        :placeholder="`${
          checkResult ? '审核通过' : '审核驳回'
        }可补充审核意见，300字以内`"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitCheck">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getJobWaitExamineList,
  examinJob,
  getJobDetailInfo
} from '@/api/school-admin-api/hireManage/index.js'
import { deepClone } from '@/utils/index'
import { educationOptions } from '@/utils/frontDataDict.js'
export default {
  name: 'Company',
  components: {
  },
  data() {
    return {
      educationOptions: educationOptions,
      remark: '',
      checkResult: true,
      checkDialog: false,
      activeName: '1',
      // 遮罩层
      loading: true,
      // 待审核-总条数
      leftTotal: 0,
      // 已审核-总条数
      rightTotal: 0,
      // 企业管理列表
      leftList: [],
      // 已审核企业列表
      rightList: [],
      // 待审核查询参数 <!-- jobName companyName creator department phone email -->
      leftQueryParams: {
        pageNo: 1,
        pageSize: 10,
        jobName: null, // 职位名称
        companyName: null, // 公司名称
        creator: null, // 创建人
        department: null, // 部门
        phone: null, // 手机号
        email: '', // 账号类型
        flag: ['1'] // 职位状态(string)：0 未发布，1 待审核，2 发布中，3 暂停发布, 4 驳回
      },
      // 已审核查询参数
      rightQueryParams: {
        pageNo: 1,
        pageSize: 10,
        jobName: null, // 职位名称
        companyName: null, // 公司名称
        creator: null, // 创建人
        operator: null, // 审核人
        flag: ['2', '3', '4'], // 职位状态(string)：0 未发布，1 待审核，2 发布中，3 暂停发布, 4 驳回
        resultType: '0' // 审核结果，resultType(string)：0 全部['2', '3', '4']，1 通过 ['2', '3']，2 驳回 ['4']
      },
      // 职位状态(string)
      jobStatus: {
        0: '未发布',
        1: '待审核',
        2: '发布中',
        3: '暂停发布',
        4: '驳回'
      },
      // 审核结果
      resultTypeStr: {
        0: '待提交审核',
        1: '审核中',
        2: '通过',
        3: '通过',
        4: '不通过'
      },
      currentRow: null, // 当前职位数据
      currentBaseRow: null, // 当前职位数据备份
      auditDialog: false, // 审核弹窗
      currentCompany: null // 当前职位的公司
    }
  },
  created() {
    this.leftGetList()
    this.rightGetList()
  },
  methods: {
    // tag切换，刷新数据
    handleClick(data) {
      const index = Number(data.index)
      switch (index) {
        case 0:
          this.leftGetList()
          break
        case 1:
          this.rightGetList()
          break
      }
    },
    // 返回学历要求的状态文本
    getEducationName(arr) {
      let name = ''
      educationOptions.map((item) => {
        if (Number(item.value) === Number(arr[0])) {
          name += item.label
          if (item.children && Array.isArray(item.children)) {
            item.children.map((iten) => {
              if (Number(iten.value) === Number(arr[1])) {
                name += '/' + iten.label
              }
            })
          }
        }
      })
      return name
    },
    handleAuditJob(result) {
      this.checkResult = !!result
      this.auditDialog = true
    },
    // 提交审核结果
    submitCheck() {
      const params = Object.assign({}, this.currentCompany, this.currentBaseRow)
      // 职位状态(string)：0 未发布，1 待审核，2 发布中，3 暂停发布, 4 驳回
      params.status = this.checkResult ? '2' : '4'
      if (Number(params.status) === 2 || Number(params.status) === 4) {
        params.remark = this.remark
      }
      examinJob(params).then((res) => {
        if (res.code === 0 && res.data) {
          this.checkDialog = false
          this.auditDialog = false
          this.remark = ''
          this.leftGetList()
        }
      })
    },
    // 获取企业数据
    fetchJobDetail(id) {
      return new Promise((resolve, reject) => {
        getJobDetailInfo(id).then(
          (res) => {
            if (res.code === 0 && res.data) {
              this.currentCompany = res.data
              resolve(res)
            }
          },
          (res) => {
            reject(res)
          }
        )
      })
    },
    // 点击审核，发起操作
    handleAudit(row) {
      this.fetchJobDetail(row.id).then(() => {
        this.currentRow = deepClone(row)
        try {
          this.currentRow.city = JSON.parse(this.currentRow.city)
        } catch (error) {
          this.currentRow.city = []
        }
        this.currentBaseRow = deepClone(row)
        // 学历要求
        try {
          this.currentRow.education = JSON.parse(this.currentRow.education)
        } catch (error) {
          this.currentRow.education = [this.currentRow.education]
        }
        // 福利标签
        try {
          this.currentRow.welfareTags = JSON.parse(this.currentRow.welfareTags)
        } catch (error) {
          this.currentRow.welfareTags = [this.currentRow.welfareTags]
        }
        this.auditDialog = true
      })
    },
    // 请求待审核列表数据
    leftGetList() {
      this.loading = true
      // 处理查询参数
      const params = deepClone(this.leftQueryParams)
      for (const key in params) {
        if (params[key] === null || params[key] === '') {
          delete params[key]
        }
      }
      // 执行查询
      getJobWaitExamineList(params).then((response) => {
        this.leftList = response.data.list
        this.leftTotal = response.data.total
        this.loading = false
      })
    },
    /** 请求已审核列表数据 */
    rightGetList() {
      this.loading = true
      // 处理查询参数
      const params = deepClone(this.rightQueryParams)
      // 审核结果，resultType(string)：0 全部['2', '3', '4']，1 通过 ['2', '3']，2 驳回 ['4']
      if (Number(params.resultType) === 0) {
        params.flag = ['2', '3', '4']
      } else if (Number(params.resultType) === 1) {
        params.flag = ['2', '3']
      } else if (Number(params.resultType) === 2) {
        params.flag = ['4']
      }
      for (const key in params) {
        if (params[key] === null || params[key] === '') {
          delete params[key]
        }
      }
      // 执行查询
      getJobWaitExamineList(params).then((response) => {
        this.rightList = response.data.list
        this.rightTotal = response.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.activeName === '1') {
        this.leftQueryParams.pageNo = 1
        this.leftGetList()
      } else {
        this.rightQueryParams.pageNo = 1
        this.rightGetList()
      }
    },
    // 重制搜索条件
    resetQuery() {
      if (this.activeName === '1') {
        this.resetForm('leftQueryParams')
        this.leftQueryParams = this.$options.data().leftQueryParams
        this.handleQuery()
      } else {
        this.resetForm('rightQueryParams')
        this.rightQueryParams = this.$options.data().rightQueryParams
        this.handleQuery()
      }
    },
    /** 审核 */
    handleCheck(row) {
      this.fetchJobDetail(row.id).then(() => {
        this.currentRow = deepClone(row)
        try {
          this.currentRow.city = JSON.parse(this.currentRow.city)
        } catch (error) {
          this.currentRow.city = []
        }
        this.currentBaseRow = deepClone(row)
        // 学历要求
        try {
          this.currentRow.education = JSON.parse(this.currentRow.education)
        } catch (error) {
          this.currentRow.education = []
        }
        // 福利标签
        try {
          this.currentRow.welfareTags = JSON.parse(this.currentRow.welfareTags)
        } catch (error) {
          this.currentRow.welfareTags = []
        }
        this.checkDialog = true
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.result-tips {
  height: 90px;
  line-height: 90px;
  font-size: 28px;
  text-align: center;
  padding: 0 55px;
  color: rgba(232, 28, 28, 1);
  border: 1px solid rgba(232, 28, 28, 1);
  border-radius: 10px;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(-30deg);
}
.greed-tip {
  color: rgba(56, 240, 49, 1);
  border: 1px solid rgba(56, 240, 49, 1);
}
.red-tip {
  color: rgba(232, 28, 28, 1);
  border: 1px solid rgba(232, 28, 28, 1);
}
::v-deep .el-descriptions-item__label {
  min-width: 100px;
}
</style>
